<script setup>
	import { ref, computed } from 'vue';
	import { useActivityProStore } from '@/store/activityPro';
	import { useCartStore } from '@/store/cart'
	import { useUserStore } from '@/store/userInfo'
	import { useShopStore } from '@/store/shop'

	// 用户store
	const userStore = useUserStore( )
	// 购物车store
	const cartStore = useCartStore( )
	// 商品store
	const shopStore = useShopStore( )
	// 获取活动商品
	const activityProStore = useActivityProStore( )

	// 商品响应数据
	const proDataList = ref( [ ] )

	// 步进器改变回调
	const handlerChangeNum = ( e ) => {
		console.log( e, '筛选前' )
		// 商品数量为0 减少 反之增加
		if ( e.num === 0 ) {
			proDataList.value = proDataList.value.filter( item => item.pro_id !== e.pro_id )
		} else {
			const index = proDataList.value.findIndex( item => item.pro_id === e.pro_id )
			if ( index !== -1 ) {
				proDataList.value[ index ].num = e.num
			} else {
				proDataList.value.push( e )
				console.log( proDataList.value, '没有规格' )
			}
		}

		// 选好了
		showFooter( )
	}

	// 定义一个变量来存储定时器 ID
	let scrollTimer = null

	// 合计件数
	const totalCount = computed( ( ) => {
		return proDataList.value.reduce( ( sum, item ) => sum + item.num, 0 )
	} )

	// 总价格
	const totalPrice = computed( ( ) => {
		return proDataList.value.reduce( ( sum, item ) => sum + ( item.num * item.buy_price ), 0 )
	} )

	// 控制购物车时的开关
	const showCart = ref( false )
	const showFooter = ( ) => {
		showCart.value = proDataList.value.length > 0
	}

	// 添加商品到购物车--选好了
	const addCart = ( ) => {
		if ( userStore.userInfo.uid ) {
			cartStore.addToCart( proDataList.value )
			setTimeout( ( ) => {
				uni.navigateTo( {
					url: '/pages/cart/cart2'
				} )
			}, 500 )
		} else {
			uni.showModal( {
				title: '提示',
				content: '请先登录',
				confirmText: "登录",
				success( res ) {
					if ( res.confirm ) {
						uni.navigateTo( {
							url: "/pages/login/login"
						} )
					}
				}
			} )
		}
	}

	const emit = defineEmits(['click'])

	const handleClick = (proId) => {
		emit('click', proId)
	}
</script>

<template>
	<up-empty marginTop="100" mode="car"
		icon="https://mp-25cc8794-9056-4536-a51b-6c5ab0bc5bd9.cdn.bspapp.com/emptyCart_no.png"
		text="今天还没有活动商品哟~" :show="!activityProStore.activityList.length">
	</up-empty>
	<view class="card" v-for="(item,index) in activityProStore.activityList" :key="item._id" @tap="handleClick(item._id)">
		<view class="pic">
			<image :src="item.cover_pic" mode="aspectFill"></image>
		</view>
		<view class="content">
			<!-- 标题 -->
			<view class="name">
				{{item.name}}
			</view>
			<!-- 描述 -->
			<view class="dec">
				新鲜好物
			</view>
			<!-- 购买 -->
			<view class="buy">
				<view class="price">
					￥{{item.buy_price?.toFixed(2)}}
				</view>
				<view class="buyButton">
					<number-box @changeNum="handlerChangeNum" :id="item._id" :name="item.name"
						:cover_pic="item.cover_pic" :buy_price="item.buy_price"
						:original_price="item.original_price"></number-box>
				</view>
			</view>
		</view>
	</view>
	<!-- 底部合计 -->
	<view class="footer" v-if="showCart">
		<!-- 选好了 -->
		<view class="footer-left">
			<!-- 购物车 -->
			<view class="cartIcon">
				<up-badge type="error" :absolute="true" :offset="[-6,-8]" max="99"
					:value="totalCount"></up-badge>
				<up-icon name="shopping-cart" color="#ed544f" size="26"></up-icon>
			</view>
			<view class="total">
				<up-text size="14" text="合计:"></up-text>
				<up-text mode="price" size="14" :text="totalPrice" color="#ed544f"></up-text>
			</view>
		</view>
		<view class="ready">
			<view class="btn" @tap="addCart">
				选好了
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.card {
		display: flex;
		margin: 24rpx 0;
		padding: 32rpx;
		border-radius: 24rpx;
		background-color: $card-bg-color;
		box-shadow: $card-shadow-color;

		.pic {
			margin-right: 16rpx;
			height: 200rpx;
			width: 200rpx;
			border-radius: 16rpx;
			overflow: hidden;
		}

		.content {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			/*产品标题*/

			.name {
				font-size: 28rpx;
				color: $text-font-color-1;
			}

			/*产品描述*/
			.dec {
				color: $text-font-color-3;
				font-size: 24rpx;
			}

			/*购买*/
			.buy {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.price {
					font-size: 24rpx;
					color: #FF6100;
				}

				.buyButton {

					.btn {
						width: fit-content;
						height: fit-content;
						font-size: 24rpx;
						color: #fff;
						background-color: $brand-theme-color;
						border: none;
					}
				}
			}
		}
	}

	/*底部*/
	.footer {
		display: flex;
		justify-content: space-between;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 24rpx;
		width: 100%;
		height: 140rpx;
		background-color: #fff;
		border-top: 1px solid $line-color-aux;
		z-index: 999;

		/*选好了*/
		.footer-left {
			display: flex;

			.cartIcon {
				position: relative;
				margin-right: 16rpx;
				padding: 16rpx;
				background-color: $card-bg-color;
				border-radius: 16rpx;
			}

			.total {
				display: flex;
			}
		}

		.ready {
			.btn {
				width: 200rpx;
				height: 70rpx;
				background-color: $brand-theme-color;
				color: #fff;
				border-radius: 80rpx;
				line-height: 70rpx;
				text-align: center;
			}
		}
	}
</style>